<template>
  <uni-datetime-picker preload v-model="dateArr" type="date" @change="changeHandle">
    <view class="cu-filter-time-container">
      <view class="title">{{ title }}</view>
      <view class="time-wrap" :class="{ placeholder: !dateArr }">{{ dateArr || '年/月/日' }}</view>
    </view>
  </uni-datetime-picker>
</template>

<script>
export default {
  name: 'CuFilterDatePicker',
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    value: {
      type: String
    },
    title: String
  },
  watch: {
    value: {
      async handler(val) {
        if (val) {
          if (val == this.dateArr) return
          this.dateArr = val
        } else {
          this.dateArr = ''
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      // 选中的元素
      dateArr: '',
      show: false
    }
  },
  methods: {
    changeHandle(val) {
      this.$emit('update:value', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.cu-filter-time-container {
  padding: 0rpx 30rpx;
  margin-bottom: 40rpx;

  .title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    padding: 0 0 20rpx 0;
  }

  ::v-deep .time-wrap {
    line-height: 70rpx;
    background: #f8f8f8;
    border-radius: 28rpx;
    font-size: 24rpx;
    padding: 0 30rpx;
    &.placeholder {
      color: #bbbbbb;
    }
  }
}
</style>
